CSS Custom Highlight Range: Разширено стилизиране на селекция на текст

Селекцията на текст е фундаментално взаимодействие в уеб. Когато потребител избере текст на уеб страница, браузърът прилага стандартен стил на маркиране, обикновено син фон с бял текст. Въпреки че е функционално, това стандартно стилизиране често може да се сблъска с естетиката на дизайна на уебсайта. CSS Custom Highlight Range предоставя мощен начин за заместване на тези стандартни стилове и създаване на по-визуално последователно и ангажиращо потребителско изживяване.

Разбиране на основите на селекцията на текст

Преди да се потопим в персонализираните обхвати на маркиране, е важно да разберем как работи селекцията на текст в браузърите. Когато потребител плъзне мишката си (или използва други методи за въвеждане), за да избере текст, браузърът идентифицира обхвата на избрания текст и прилага стандартния стил на маркиране. Това се управлява от вътрешния рендиращ енджин на браузъра и по подразбиране не може да се контролира директно със CSS.

Стандартно стилизиране на селекцията

Стандартното стилизиране на селекция на текст се управлява от user agent stylesheet на браузъра. Този stylesheet осигурява основното стилизиране за всички HTML елементи и включва стандартното стилизиране на маркирането. Конкретните цветове и стилове могат леко да варират между различните браузъри и операционни системи.

Представяне на псевдоелемента ::selection

CSS предоставя псевдоелемента ::selection за насочване към избрания текст. Това ви позволява да променяте свойствата background-color и color на избрания текст. Този подход обаче има ограничения. Той ви позволява да променяте само фона и цвета на текста и не предлага по-финен контрол върху обхвата на маркирането.

            
::selection {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

Този прост CSS фрагмент ще промени цвета на фона на избрания текст на жълт, а цвета на текста на черен. Въпреки че е полезно, това е само върхът на айсберга.

CSS Custom Highlight Range API

CSS Custom Highlight Range API предоставя по-напреднал и гъвкав начин за стилизиране на селекции на текст. Този API ви позволява да дефинирате конкретни обхвати на маркиране и да прилагате персонализирани стилове към тях. Това е особено полезно за създаване на по-визуално привлекателни и лесни за ползване интерфейси.

Ключови концепции

• Highlight API: Основната технология, която позволява персонализираното стилизиране.
• Highlight Regions: Конкретните обхвати на текста, които са насочени за персонализирано стилизиране.
• Custom Styles: CSS свойствата (освен само цвят и цвят на фона), които се прилагат към регионите на маркиране.

Предимства от използването на CSS Custom Highlight Range

• Подобрена персонализация: Прилагайте по-широк набор от CSS свойства, включително градиенти, рамки, сенки и други.
• Подобрено потребителско изживяване: Създавайте по-визуално привлекателни и последователни стилове за селекция на текст, които съответстват на дизайна на вашия уебсайт.
• Достъпност: Уверете се, че вашите персонализирани стилове на маркиране са достъпни за потребители със зрителни увреждания, като осигурите достатъчен контраст и ясни визуални знаци.
• Фин контрол: Насочвайте се към конкретни обхвати на текста за персонализирано стилизиране, което позволява по-прецизно и контекстуално маркиране.

Внедряване на CSS Custom Highlight Range

Внедряването на CSS Custom Highlight Range включва използването на JavaScript за идентифициране на текстовите обхвати, които искате да стилизирате, и след това прилагане на желаните CSS свойства към тези обхвати.

Стъпка 1: Избор на текстов обхват

Първата стъпка е да идентифицирате текстовия обхват, който искате да стилизирате. Това може да се направи с помощта на различни JavaScript техники, като например:

• document.getSelection(): Този метод връща обект Selection, представляващ обхвата на текста, избран от потребителя.
• Range API: Този API ви позволява да създавате и манипулирате текстови обхвати програмно.

Пример с използване на document.getSelection():

            
const selection = document.getSelection();
if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);
  // Now you have the range object to work with
}

            

              
                Copy
              
            
          

Пример с използване на Range API:

            
const range = document.createRange();
const element = document.getElementById('myElement');
range.selectNodeContents(element);
// Now you have a range that selects all content inside element

            

              
                Copy
              
            
          

Стъпка 2: Създаване на обект Highlight

След като имате обект Range, трябва да създадете обект за маркиране (highlight object). Този обект ще представлява персонализираното маркиране и ще се използва за прилагане на желаните стилове.

            
const highlight = new Highlight(range);

            

              
                Copy
              
            
          

Стъпка 3: Регистриране на маркирането

За да направите маркирането видимо, трябва да го регистрирате в обекта CSS.highlights. Това е глобален обект, който управлява всички персонализирани маркирания на страницата.

            
if (!window.CSS.highlights) {
  console.error('CSS Custom Highlight API is not supported in this browser.');
} else {
  CSS.highlights.set('my-custom-highlight', highlight);
}

            

              
                Copy
              
            
          

Тук 'my-custom-highlight' е произволно име, което избирате, за да идентифицирате вашето маркиране.

Стъпка 4: Прилагане на персонализирани стилове със CSS

Накрая, можете да приложите персонализирани стилове към маркирането, като използвате псевдоелемента ::highlight() във вашия CSS.

            
::highlight(my-custom-highlight) {
  background-color: rgba(255, 200, 0, 0.5);
  color: #333;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

            

              
                Copy
              
            
          

Този CSS фрагмент ще приложи полупрозрачен жълт фон, тъмносив текст, удебелен шрифт и фина текстова сянка към текста в обхвата 'my-custom-highlight'.

Пълен пример

Ето пълен пример, демонстриращ как да използвате CSS Custom Highlight Range:

HTML:

            
This is some text that can be selected.  We will customize the highlight styling using CSS Custom Highlight Range.

            

              
                Copy
              
            
          

JavaScript:

            
const textElement = document.getElementById('myText');

textElement.addEventListener('mouseup', () => {
  const selection = document.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    const highlight = new Highlight(range);

    if (!window.CSS.highlights) {
      console.error('CSS Custom Highlight API is not supported in this browser.');
    } else {
      CSS.highlights.set('custom-selection', highlight);
    }
  }
});

            

              
                Copy
              
            
          

CSS:

            
::highlight(custom-selection) {
  background-color: lightgreen;
  color: darkgreen;
  font-style: italic;
}

            

              
                Copy
              
            
          

В този пример, когато потребителят пусне бутона на мишката след избиране на текст в параграфа, JavaScript кодът създава маркиране и го регистрира. След това CSS прилага светлозелен фон, тъмнозелен цвят на текста и курсивен стил на шрифта към избрания текст.

Разширени техники за персонализация

CSS Custom Highlight Range позволява още по-напреднали техники за персонализация, включително:

Използване на градиенти

Можете да използвате CSS градиенти, за да създадете визуално зашеметяващи ефекти на маркиране.

            
::highlight(gradient-highlight) {
  background-image: linear-gradient(to right, #f00, #ff0);
  color: white;
  font-weight: bold;
}

            

              
                Copy
              
            
          

Добавяне на рамки и сенки

Можете да добавите рамки и сенки към маркирането, за да го направите още по-изпъкващо.

            
::highlight(border-highlight) {
  background-color: rgba(0, 0, 255, 0.2);
  border: 2px solid blue;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  color: black;
}

            

              
                Copy
              
            
          

Условно маркиране

Можете да използвате JavaScript, за да променяте динамично стиловете на маркиране въз основа на определени условия. Например, можете да маркирате различни видове текст с различни цветове.

            
// Example: Highlight keywords in a different color
const keywords = ['keyword1', 'keyword2', 'keyword3'];

// (Implementation for finding keywords and creating ranges would go here)

// Then, in CSS:
::highlight(keyword-highlight) {
  background-color: yellow;
  color: red;
}

            

              
                Copy
              
            
          

Съображения за достъпност

При внедряване на персонализирани стилове на маркиране е изключително важно да се вземе предвид достъпността. Уверете се, че вашите стилове на маркиране осигуряват достатъчен контраст и ясни визуални знаци за потребители със зрителни увреждания.

Съотношение на контраста

Уверете се, че съотношението на контраста между цвета на фона и цвета на текста на вашите стилове на маркиране отговаря на изискванията на WCAG (Web Content Accessibility Guidelines). Препоръчва се съотношение на контраста от поне 4.5:1 за нормален текст и 3:1 за голям текст.

Визуални знаци

Осигурете ясни визуални знаци, които да показват, че текстът е избран. Това може да се направи чрез използване на отчетливи цветове, рамки или сенки.

Тестване с помощни технологии

Тествайте вашите персонализирани стилове на маркиране с помощни технологии, като екранни четци, за да се уверите, че са достъпни за всички потребители.

Съвместимост с браузъри

CSS Custom Highlight Range API е сравнително нова технология и поддръжката от браузърите може да варира. Към края на 2023 г. се поддържа в браузъри, базирани на Chromium (Chrome, Edge, Brave) и Safari (Technology Preview). Firefox е изразил интерес, но поддръжката все още не е внедрена.

Важно е да проверявате най-новата информация за съвместимост с браузъри, преди да използвате този API в продукция. Можете да използвате уебсайтове като „Can I use...“, за да следите поддръжката на браузърите за CSS Custom Highlight Range.

За браузъри, които не поддържат API, можете да използвате псевдоелемента ::selection като резервен вариант.

Случаи на употреба и примери

Ето някои практически случаи на употреба и примери за това как може да се използва CSS Custom Highlight Range:

Кодови редактори

Персонализирайте стиловете на маркиране за избран код в кодов редактор, за да подобрите четливостта и визуалната привлекателност. Различните езици за програмиране дори биха могли да имат различни схеми за маркиране.

Програми за преглед на документи

Подобрете потребителското изживяване на програмите за преглед на документи, като предоставите персонализирани стилове на маркиране, които съответстват на дизайна на документа.

Платформи за електронно обучение

Създавайте интерактивни учебни преживявания, като маркирате ключови понятия или важна информация в персонализиран стил.

Маркиране на резултати от търсене

Подобрете видимостта на резултатите от търсенето, като маркирате съвпадащите термини с отчетлив персонализиран стил. Помислете как би изглеждало това при многоезично търсене, където цветовете на маркирането биха могли фино да показват езика на съвпадащия термин.

Инструменти за анотации

Позволете на потребителите да анотират текст с персонализирани стилове на маркиране, за да отбележат важни пасажи или да добавят бележки. На различните потребители могат да бъдат присвоени различни цветове за маркиране при съвместно анотиране.

Добри практики

• Използвайте семантичен HTML: Използвайте семантични HTML елементи, за да структурирате съдържанието си. Това ще улесни идентифицирането на текстовите обхвати, които искате да стилизирате.
• Бъдете семпли: Избягвайте използването на прекалено сложни или разсейващи стилове на маркиране. Целта е да се подобри потребителското изживяване, а не да се претоварва потребителя.
• Тествайте обстойно: Тествайте вашите персонализирани стилове на маркиране на различни браузъри и устройства, за да се уверите, че работят както се очаква.
• Вземете предвид производителността: Избягвайте създаването на твърде много обхвати на маркиране, тъй като това може да повлияе на производителността. Оптимизирайте своя JavaScript код за ефективно идентифициране и стилизиране на текстовите обхвати.

Заключение

CSS Custom Highlight Range предлага мощен и гъвкав начин за стилизиране на селекции на текст в уеб. Използвайки този API, можете да създавате по-визуално привлекателни и лесни за ползване интерфейси, които подобряват потребителското изживяване и съответстват на дизайна на вашия уебсайт. Въпреки че поддръжката от браузърите все още се развива, потенциалните ползи от тази технология я правят ценен инструмент за уеб разработчици и дизайнери. Не забравяйте да дадете приоритет на достъпността и производителността при внедряване на персонализирани стилове на маркиране. С развитието на уеб, функции като CSS Custom Highlight Range ще играят все по-важна роля в оформянето на потребителското изживяване.